import React from 'react'
import PropTypes from 'prop-types'
import {connect} from 'dva'
import {Card} from 'antd'
import {routerRedux} from 'dva/router'
import {Page} from 'components'
import queryString from 'query-string'
import Filter from './components/Filter'
import List from './components/List'
import FriendCircle from 'components/FriendCircle'


const operatorFriendCircle = ({location, dispatch, loading, operatorFriendCircle, discover}) => {
  const {query, pathname} = location
  const {list, pagination, empList, departments} = operatorFriendCircle
  const {author, discoveriesVisible} = discover
  const handleRefresh = (newQuery) => {
    dispatch(routerRedux.push({
      pathname,
      search: queryString.stringify({
        ...query,
        ...newQuery,
      }),
    }))
  }

  const filterProps = {
    filter: {
      ...query,
    },
    empList,
    departments,
    onFilterChange (value) {
      handleRefresh({
        ...value,
        current: 1,
      })
    },
    handleSearch (key) {
      if (key) {
        dispatch({
          type: 'operatorFriendCircle/searchEmp',
          payload: {
            key,
          },
        })
      }
    },
  }

  const listProps = {
    rowKey: 'id',
    dataSource: list,
    loading: loading.effects['operatorFriendCircle/query'],
    pagination,
    location,
    onChange (page) {
      handleRefresh({
        current: page.current,
        size: page.pageSize,
      })
    },
    showDiscoveries (record) {
      dispatch({
        type: 'discover/showDiscoveries',
        payload: {
          author: {
            id: record['customerWxId'],
            name: record['customerWxNickname'],
            dfriendId: record['dcustomerWxId'],
            avatar: record['icon'] || '/public/logo@300.png',
            signature: record['signature'] || '没有获取到个性签名',
            background: '/public/default-cover.jpg',
            startTime: record['releaseTime'],
          },
        },
      })
    },
  }

  return (
    <div>
      <Card style={{marginBottom: 12}}>
        <Filter {...filterProps} />
      </Card>
      <Page inner>
        <List {...listProps} />
      </Page>
      {discoveriesVisible && <FriendCircle requireRecommend={true}/>}
    </div>
  )
}

operatorFriendCircle.propTypes = {
  location: PropTypes.object,
}
export default connect(({operatorFriendCircle, discover, loading}) => ({operatorFriendCircle, discover, loading}))(operatorFriendCircle)
